<template>		
    <div class="wrapper">
        
        <!-- header部分 -->
        <header>
            <p>在线支付</p>
        </header>
        
        <!-- 订单信息部分 -->
        <h3>订单编号：{{orderId}}</h3>
        <div class="order-info">
            <p>
				{{business.businessName}}
				<i class="fa fa-caret-down" @click="detailetShow"></i>
			</p>
            <p>&#165;{{order.orderTotal}}</p>
        </div>
        
        <!-- 订单明细部分 -->
        <ul  v-show="isShowDetailet" class="order-detailet" id="detailetBox">
            <li v-for="item in odArray" :key="item.odId">
                <p>{{item.food.foodName}} x {{item.quantity}}</p>
                <p>&#165;{{item.food.foodPrice*item.quantity}}</p>
            </li>
            <li>
                <p>配送费</p>
                <p>&#165;{{business.deliveryPrice}}</p>
            </li>
        </ul>
        
        <!-- 支付方式部分 -->
        <ul class="payment-type">
            <li>
                <img @click="changePayType(0)" src="../assets/alipay.png">
                <i v-show="payType==0" class="fa fa-check-circle"></i>
            </li>
            <li>
                <img @click="changePayType(1)" src="../assets/wechat.png">
				<i v-show="payType==1" class="fa fa-check-circle"></i>
            </li>
        </ul>
        <div class="payment-button">
            <button @click="payOver">确认支付</button>
        </div>
        
        <!-- 底部菜单部分 -->
        <Footer></Footer>
        
    </div>
</template>

<script>
    // 导入共通的组件
    import Footer from '../components/Footer.vue'
    export default {
        data(){
            return {
				user:{},
				orderId:this.$route.query.orderId,
				order:{},
				business:{},
				odArray:[],
				payType:0,
				isShowDetailet:false
            }
        },
        components: {
			Footer
		},
        created(){
            //查看SessionStorage中有没用user
			this.user = this.$getSessionStorage('user');

			this.$axios.post('OrderController/orderById',this.$qs.stringify({
			orderId:this.orderId
			})).then(response=>{
				this.order = response.data;
				this.business = response.data.business;
				console.log(this.order);
			}).catch(error=>{
				console.error(error);
			});
        },
        methods:{
            changePayType(payTypeId){
				this.payType = payTypeId;
			},
			detailetShow(){
				if(this.orderDetail == null){
					this.$axios.post('OrderDetailController/orderDetailList',this.$qs.stringify({
					orderId:this.orderId
					})).then(response=>{
						this.odArray = response.data;
						this.odArray.sort();
					}).catch(error=>{
						console.error(error);
					});	
				}
				this.isShowDetailet = !this.isShowDetailet;
			},
			payOver(){
				this.$axios.post('OrderController/payOver',this.$qs.stringify({
				orderId:this.orderId
				})).then(response=>{
					if(response.data = 1){
						alert("支付完成，欢迎下次光临")
						this.$router.push({
							path:'/orderList'
						});
					}else{
						alert("支付失败")
					}
				}).catch(error=>{
					console.error(error);
				});	
			}
        }
    }
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper{
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper h3{
	margin-top: 12vw;
	box-sizing: border-box;
	padding: 4vw 4vw 0;
	
	font-size: 4vw;
	font-weight: 300;
	color: #999;
}
.wrapper .order-info{
	box-sizing: border-box;
	padding: 4vw;
	font-size: 4vw;
	color: #666;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wrapper .order-info p:last-child{
	color: orangered;
}
/****************** 订单明细部分 ******************/
.wrapper .order-detailet{
	width: 100%;
}
.wrapper .order-detailet li{
	width: 100%;
	box-sizing: border-box;
	padding: 1vw 4vw;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wrapper .order-detailet li p{
	font-size: 3vw;
	color: #666;
}

/****************** 支付方式部分 ******************/
.wrapper .payment-type{
	width: 100%;
}
.wrapper .payment-type li{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wrapper .payment-type li img{
	width: 33vw;
	height: 8.9vw;
}
.wrapper .payment-type li .fa-check-circle{
	font-size: 5vw;
	color: #38CA73;
}
.wrapper .payment-button{
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
}
.wrapper .payment-button button{
	width: 100%;
	height: 10vw;
	border: none;
	/*去掉外轮廓线*/
	outline: none;
	border-radius: 4px;
	background-color: #38CA73;
	color: #fff;
}
</style>